<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="community-page bg-gray-50 min-h-screen">
    <!-- Region Selector -->
    <view class="sticky top-0 z-10 bg-white shadow-sm">
      <view class="region-tabs-container overflow-x-auto">
        <view class="region-tabs flex py-3 px-2">
          <view
            v-for="region in regions"
            :key="region.id"
            class="region-tab whitespace-nowrap px-2 py-2 rounded-full text-sm font-medium mr-2 transition-colors"
            :class="
              activeRegion === region.id ? 'bg-orange-500 text-white' : 'bg-gray-100 text-gray-700'
            "
            @click="setActiveRegion(region.id)"
          >
            {{ region.name }}
          </view>
        </view>
      </view>
    </view>

    <!-- Community Content -->
    <view class="px-2 py-4">
      <!-- Region Header -->
      <view class="flex items-center justify-between mb-4">
        <view class="text-xl font-bold text-gray-800">{{ activeRegionData.name }}</view>
        <view class="flex items-center text-sm text-gray-500">
          <Users class="w-4 h-4 mr-1" />
          <text>{{ activeRegionData.members }}位居民</text>
        </view>
      </view>

      <!-- Region Banner -->
      <view class="relative rounded-lg overflow-hidden mb-4">
        <image
          :src="activeRegionData.banner"
          alt="Region banner"
          class="w-full h-40 object-cover"
        />
        <view
          class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-2"
        >
          <view class="text-white text-sm">{{ activeRegionData.description }}</view>
        </view>
      </view>

      <!-- Announcements -->
      <view class="bg-white rounded-lg p-2 mb-4 shadow-sm">
        <view class="flex items-center mb-3">
          <Megaphone class="w-5 h-5 text-orange-500 mr-2" />
          <view class="font-bold text-gray-800">社区公告</view>
        </view>
        <view class="space-y-3">
          <view
            v-for="(announcement, index) in activeRegionData.announcements"
            :key="index"
            class="border-b border-gray-100 pb-3 last:border-0 last:pb-0"
          >
            <view class="text-gray-700">{{ announcement.content }}</view>
            <view class="flex justify-between items-center mt-2">
              <text class="text-xs text-gray-500">{{ announcement.date }}</text>
              <text class="text-xs text-orange-500">查看详情</text>
            </view>
          </view>
        </view>
      </view>

      <!-- Community Topics -->
      <view class="mb-4">
        <view class="flex justify-between items-center mb-3">
          <view class="font-bold text-gray-800">热门话题</view>
          <view class="text-sm text-orange-500 flex items-center">
            更多
            <ChevronRight class="w-4 h-4" />
          </view>
        </view>
        <view class="grid grid-cols-2 gap-3">
          <view
            v-for="(topic, index) in activeRegionData.topics"
            :key="index"
            class="bg-white rounded-lg overflow-hidden shadow-sm"
          >
            <image :src="topic.image" :alt="topic.title" class="w-full h-24 object-cover" />
            <view class="p-3">
              <view class="font-medium text-gray-800 line-clamp-1">{{ topic.title }}</view>
              <view class="flex items-center justify-between mt-2">
                <text class="text-xs text-gray-500">{{ topic.participants }}人参与</text>
                <text class="text-xs text-orange-500">参与讨论</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- Community Posts -->
      <view>
        <view class="flex justify-between items-center mb-3">
          <view class="font-bold text-gray-800">最新动态</view>
          <view class="text-sm text-orange-500 flex items-center">
            更多
            <ChevronRight class="w-4 h-4" />
          </view>
        </view>
        <view class="space-y-4">
          <view
            v-for="(post, index) in activeRegionData.posts"
            :key="index"
            class="bg-white rounded-lg p-2 shadow-sm"
          >
            <view class="flex items-center mb-3">
              <image
                :src="post.author.avatar"
                :alt="post.author.name"
                class="w-10 h-10 rounded-full object-cover mr-3"
              />
              <view>
                <view class="font-medium text-gray-800">{{ post.author.name }}</view>
                <view class="text-xs text-gray-500">{{ post.date }}</view>
              </view>
            </view>
            <view class="text-gray-700 mb-3">{{ post.content }}</view>
            <view v-if="post.images && post.images.length > 0" class="grid grid-cols-3 gap-2 mb-3">
              <image
                v-for="(image, imgIndex) in post.images"
                :key="imgIndex"
                :src="image"
                alt="Post image"
                class="w-full h-24 object-cover rounded-lg"
              />
            </view>
            <view class="flex justify-between items-center text-gray-500 text-sm">
              <view class="flex items-center">
                <ThumbsUp class="w-4 h-4 mr-1" />
                {{ post.likes }}
              </view>
              <view class="flex items-center">
                <MessageSquare class="w-4 h-4 mr-1" />
                {{ post.comments }}
              </view>
              <view class="flex items-center">
                <Share2 class="w-4 h-4 mr-1" />
                分享
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- Floating Action Button -->
    <view
      class="fixed bottom-6 right-6 w-14 h-14 rounded-full bg-orange-500 text-white shadow-lg flex items-center justify-center"
    >
      <PenSquare class="w-6 h-6" />
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import {
  Users,
  Megaphone,
  ChevronRight,
  ThumbsUp,
  MessageSquare,
  Share2,
  PenSquare,
} from 'lucide-vue-next'

// Region data
const regions = [
  { id: 'xinzhou', name: '信州区' },
  { id: 'guangfeng', name: '广丰区' },
  { id: 'yushan', name: '玉山县' },
  { id: 'shangrao', name: '上饶县' },
  { id: 'poyang', name: '鄱阳县' },
  { id: 'wannian', name: '万年县' },
  { id: 'yugan', name: '余干县' },
  { id: 'yiyang', name: '弋阳县' },
  { id: 'hengfeng', name: '横峰县' },
  { id: 'wuyuan', name: '婺源县' },
  { id: 'dexing', name: '德兴市' },
]

// Active region
const activeRegion = ref('xinzhou')

const setActiveRegion = (regionId) => {
  activeRegion.value = regionId

  // In a real app, you might fetch data for the selected region here
}

// Region content data
const regionsData = {
  xinzhou: {
    name: '信州区',
    members: 12580,
    banner: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
    description: '信州区是上饶市的中心城区，历史悠久，文化底蕴深厚，是上饶市政治、经济、文化中心。',
    announcements: [
      { content: '关于信州区2023年文化节活动安排的通知', date: '2023-10-15' },
      { content: '信州区城市道路改造工程施工公告', date: '2023-10-10' },
      { content: '信州区社区志愿服务招募公告', date: '2023-10-05' },
    ],
    topics: [
      {
        title: '信州区最好吃的小吃在哪里？',
        image: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        participants: 156,
      },
      {
        title: '信州区新建公园有什么好玩的？',
        image: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        participants: 89,
      },
      {
        title: '信州区老街改造后怎么样？',
        image: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        participants: 213,
      },
      {
        title: '信州区哪里适合周末亲子活动？',
        image: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        participants: 178,
      },
    ],
    posts: [
      {
        author: {
          name: '城市观察员',
          avatar: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        },
        date: '10分钟前',
        content: '今天经过信州区中心广场，发现新安装的景观灯非常漂亮，晚上亮起来一定很美！',
        images: [
          'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
          'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
          'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        ],
        likes: 25,
        comments: 8,
      },
      {
        author: {
          name: '美食达人',
          avatar: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        },
        date: '2小时前',
        content: '信州区新开的那家江西菜馆真的很不错，价格实惠，味道正宗，强烈推荐大家去尝尝！',
        images: [
          'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
          'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        ],
        likes: 42,
        comments: 15,
      },
      {
        author: {
          name: '社区志愿者',
          avatar: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        },
        date: '昨天',
        content:
          '今天参加了信州区组织的社区清洁活动，看到这么多居民一起参与，感到很温暖。我们的家园需要大家一起爱护！',
        images: [],
        likes: 67,
        comments: 23,
      },
    ],
  },
  guangfeng: {
    name: '广丰区',
    members: 9876,
    banner: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
    description: '广丰区位于上饶市西部，是著名的"中国茶叶之乡"，盛产白茶，自然风光秀美。',
    announcements: [
      { content: '广丰区2023年白茶文化节即将举行', date: '2023-10-18' },
      { content: '关于广丰区农村道路建设工程的通知', date: '2023-10-12' },
      { content: '广丰区特色农产品展销会邀请函', date: '2023-10-08' },
    ],
    topics: [
      {
        title: '广丰白茶的正确冲泡方法是什么？',
        image: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        participants: 132,
      },
      {
        title: '广丰区有哪些值得一去的景点？',
        image: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        participants: 95,
      },
      {
        title: '广丰区最有特色的小吃是什么？',
        image: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        participants: 187,
      },
      {
        title: '广丰区的传统手工艺有哪些？',
        image: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        participants: 76,
      },
    ],
    posts: [
      {
        author: {
          name: '茶叶专家',
          avatar: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        },
        date: '30分钟前',
        content: '今年的广丰白茶品质特别好，刚从茶园回来，分享一些采茶的照片，期待白茶文化节！',
        images: [
          'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
          'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
          'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        ],
        likes: 38,
        comments: 12,
      },
      {
        author: {
          name: '乡村摄影师',
          avatar: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        },
        date: '3小时前',
        content: '广丰的乡村风光真美，今天拍到了金黄色的稻田，秋天的广丰是最美的季节！',
        images: [
          'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
          'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        ],
        likes: 56,
        comments: 18,
      },
      {
        author: {
          name: '本地居民',
          avatar: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        },
        date: '昨天',
        content: '广丰区的新农贸市场终于开业了，环境比以前好多了，买菜也方便了，点赞！',
        images: ['http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png'],
        likes: 45,
        comments: 14,
      },
    ],
  },
  // Add similar data for other regions
  yushan: {
    name: '玉山县',
    members: 8765,
    banner: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
    description: '玉山县位于上饶市西北部，是江西省的北大门，素有"江西北大门，皖赣通衢地"之称。',
    announcements: [
      { content: '玉山县2023年秋季旅游推广活动公告', date: '2023-10-17' },
      { content: '关于玉山县城区交通管制的通知', date: '2023-10-11' },
      { content: '玉山县传统文化保护项目招募志愿者', date: '2023-10-06' },
    ],
    topics: [
      {
        title: '玉山县的历史古迹有哪些值得参观？',
        image: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        participants: 112,
      },
      {
        title: '玉山县特色小吃推荐',
        image: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        participants: 143,
      },
      {
        title: '玉山县的传统节日活动有哪些？',
        image: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        participants: 98,
      },
      {
        title: '玉山县周边自驾游路线分享',
        image: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        participants: 165,
      },
    ],
    posts: [
      {
        author: {
          name: '历史爱好者',
          avatar: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        },
        date: '1小时前',
        content: '今天参观了玉山县的古城墙，保存得非常完好，是了解当地历史的好去处！',
        images: [
          'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
          'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        ],
        likes: 32,
        comments: 9,
      },
      {
        author: {
          name: '美食探索者',
          avatar: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        },
        date: '4小时前',
        content: '玉山的豆腐宴真是太美味了，每道菜都是用豆腐做的，但风味各异，强烈推荐！',
        images: [
          'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
          'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
          'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        ],
        likes: 47,
        comments: 21,
      },
      {
        author: {
          name: '本地导游',
          avatar: 'http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png',
        },
        date: '昨天',
        content:
          '秋天的玉山山色特别美，这是我昨天带团去的景点，空气清新，景色宜人，非常适合周末出游！',
        images: ['http://llcdn.jxsr.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250411173130.png'],
        likes: 53,
        comments: 17,
      },
    ],
  },
}

// For other regions, use xinzhou data as fallback
for (const region of regions) {
  if (!regionsData[region.id]) {
    regionsData[region.id] = {
      ...regionsData.xinzhou,
      name: region.name,
    }
  }
}

// Computed property to get data for the active region
const activeRegionData = computed(() => {
  return regionsData[activeRegion.value] || regionsData.xinzhou
})
</script>

<style scoped>
.region-tabs-container {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Firefox */
}

.region-tabs-container::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Edge */
}

.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
